<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :title="title"
    @close="clear"
  >
    <el-form :model="commentForm" ref="CommentFormDate" :rules="commentRules">
      <div class="block">
        <span class="demonstration">评分</span>
        <el-slider
          v-model="value"
          :step="20"
          :format-tooltip="formatTooltip"
          show-stops>
        </el-slider>
      </div>

      <el-form-item prop="context">
        <el-input type="textarea" v-model="commentForm.context"
                  maxlength="150"
                  autosize
                  placeholder="效果如何，服务是否周到，环境怎么样？（写够20字，才是好同志～）"/>
      </el-form-item>

      <el-form-item label="上传图片" prop="picture">
        <add-image ref="AddImage" style="float: left" @getfile="getFile"/>
      </el-form-item>

      <el-form-item label="匿名评价" prop="anonymous">
        <el-switch
          v-model="anonymous"
          active-color="#13ce66"
          style="float: left"
          inactive-color="#ff4949"
          @change="(value) => anonymousEvaluation(value)">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin: -40px 0">
      <el-button @click="clear">取消</el-button>
      <el-button type="primary" @click="submit" :disabled="disabled">确 定</el-button>
    </div>

  </el-dialog>
</template>

<script>
import AddImage from "../../system/other/component/AddImage";

export default {
  name: "OrderComment",
  components: {AddImage},
  data() {
    return {
      dialogFormVisible: false,
      title: '',
      value: 0,
      commentForm: {
        context:''
      },
      // 匿名评价
      anonymous: false,
      // 验证规则
      commentRules: {},
      // 图片信息
      photoFile: '',
      // 订单信息
      order: '',
      disabled:false
    }
  },
  methods: {
    addComment(order) {
      this.order = order
      this.dialogFormVisible = true
      this.title = "订单评价"
    },
    viewComment(order){
      this.order = order
      this.dialogFormVisible = true
      this.title = "订单评价"
      this.$axios.post("/comment/findComment", order).then(resp => {
        console.log(resp.data)
        if (resp.data.code === 200) {
          let result = resp.data.result.comment
          this.commentForm.context = result.context
          this.value = (result.score)*20
          this.anonymous = result.anonymous
          this.disabled = true
        }
      })
    },
    submit() {
      let score = {'score':this.value/20}
      let anonymous={'anonymous':this.anonymous}
      let comment = Object.assign({},this.commentForm,score,anonymous)
      let commentOrder=Object.assign({},this.order)
      console.log(comment)
      this.$axios.post("/comment/add",{
        comment,
        commentOrder,
        'photoName':this.photoFile.message,'photoAddress':this.photoFile.fileAddress,
      }).then(resp=>{
        if(resp.data.code===200){
          this.$message.success(resp.data.result)
          this.clear()
        }
      })
    },
    clear() {
      this.dialogFormVisible = false
      this.commentForm= { context:'' }
      this.value=0
      this.anonymous= false
      this.$refs.AddImage.clean()
    },
    /*
    * 评分条格式化
    * */
    formatTooltip(value) {
      return value / 20;
    },
    /*
    * 是否开启匿名评价
    * */
    anonymousEvaluation(value) {
      this.anonymous = value
    },
    /*
    * 获取上传成功的图片信息
    * */
    getFile(file) {
      this.photoFile = file
    }
  }
}
</script>

<style scoped>

</style>
